<!DOCTYPE html>
<html ng-app="myapp">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title>MyApp</title>
        <!-- Path to Framework7 Library CSS-->
        <link rel="stylesheet" href="lib/framework7/css/framework7.min.css">
        <!-- Path to your custom app styles-->
        <link rel="stylesheet" href="../toast.css">
    </head>
    
    <body>
        <!-- Header -->
        <!-- Status bar overlay for fullscreen mode-->
        <div class="statusbar-overlay"></div>
        <!-- Panels overlay-->
        <div class="panel-overlay"></div>
        <!-- /Header -->
        <!-- Views-->
        <div class="views">
            <!-- Your main view, should have "view-main" class-->
            <div class="view view-main">
                <!-- Top Navbar-->
                <div class="navbar">
                    <!-- Navbar page 1 -->
                    <div class="navbar-inner">
                        <div class="center sliding">Framework7 toast plugin</div>
                    </div>
                </div>
                <!-- Pages, because we need fixed-through navbar and toolbar, it has additional
                appropriate classes-->
                <div class="pages navbar-through toolbar-through">
                    <!-- - [Page 1] ---------------------------------------- -->
                    <div data-page="index" class="page" ng-controller="IndexPageController">
                        <!-- Page content-->
                        <div class="page-content">
                            <div class="content-block">
                                <p>
                                    <a href="#" id="btnshow" class="button">Show toast</a>
                                </p>
                                <p>
                                    <a href="#" id="btnhide" class="button">Hide toast</a>
                                </p>
                                <p>
                                    <a href="#" id="btnShowNoIcon" class="button">Show no icon toast</a>
                                </p>
                                <p>
                                    <a href="#" id="btnHideNoIcon" class="button">Hide no icon toast</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Bottom Toolbar-->
                <!-- <div class="toolbar">
        </div>
        --></div>
        </div>
        <script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
        <script type="text/javascript" src="../toast.js"></script>
        <!-- Dev only! Removes this for live build -->
        <script src="//localhost:35729/livereload.js"></script>
        <script type="text/javascript" src="js/myapp/pages/IndexPageController.js"></script>
        <script type="text/javascript" src="js/myapp/init.js"></script>
    </body>

</html>